<style lang="scss" scoped>
::v-deep .el-carousel__arrow {
  position: absolute;
  top: 50%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  .bannerlun {
    width: 100%;
    height: 500px;
    position: relative;
    background: #f4f5f9;
    // top:-80px;
    margin-bottom: -100px;
    min-height: 616px;
    position: relative;
    .bannerA {
      // width: 1500px;
      width: 80%;
      margin: 0 auto;
      overflow: hidden;
      // height: 76%;
    }
    img {
      width: 100%;
      height: 412px;
      // height: 59%
    }
  }
  .search {
    width: 968px;
    position: absolute;
    left: 50%;
    margin-left: -484px;
    // bottom: 40px;
    bottom: 70px;
    z-index: 10;
    input {
      width: 775px;
      height: 65px;
      border-radius: 5px;
      background: #fff;
      border: none;
      outline: none;
      box-shadow: 0 3px 15px rgba(83, 83, 83, 0.1);
      padding-left: 30px;
      padding-right: 150px;
      font-size: 18px;
    }
    button {
      background: #df2315;
      // background: -moz-linear-gradient(to left,#ffa385 0,#ff518b 100%);
      // background: -webkit-linear-gradient(to left,#ffa385,#ff518b);
      // background: -o-linear-gradient(to left,#ffa385 0,#ff518b 100%);
      // background: -ms-linear-gradient(to left,#ffa385 0,#ff518b 100%);
      // background: linear-gradient(to left,#ffa385,#ff518b);
      color: #fff;
      border: none;
      width: 90px;
      height: 67px;
      border-radius: 5px;
      position: absolute;
      top: 0px;
      right: 0;
      font-size: 20px;
      cursor: pointer;
    }
    .iconfont {
      cursor: pointer;
    }
  }
  .thing {
    width: 100%;
    min-width: 1000px;
    background: #f4f5f9;
    .thingB {
      // width: 1500px;
      width: 80%;
      height: 600px;
      margin: 0 auto;
    }
    .left {
      margin-left: 27px;
    }
    .list {
      // width: 650px;
      width: 48.6%;
      height: 451px;
      float: left;
      // padding: 34px;
      margin-top: 90px;
      font-size: 16px;
      line-height: 1.7;
      background: #ffffff;
      .title {
        width: 100%;
        height: 50px;
        line-height: 58px;
        padding: 0 30px;
        border-bottom: 1px solid #f4f5f9;
        position: relative;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 17px;
          color: #6b6b6b;
        }
        .line {
          width: 67px;
          height: 2px;
          background: #121f40;
          position: absolute;
          border-radius: 5px;
          left: 29px;
          bottom: 0px;
        }
        .more {
          font-size: 14px !important;
          color: #9d9d9d;
          cursor: pointer;
        }
      }
      ul {
        height: 400px;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        overflow: auto;
        .listEvent {
          &:nth-child(even) {
            background: #f8f8f8;
          }
        }
        li {
          position: relative;
          width: 100%;
          height: 50px;
          line-height: 50px;
          padding-left: 30px;
          padding-bottom: 15px;
          padding-right: 95px;
          // padding-top: 15px;
          border-bottom: 1px solid #f4f5f9;
          list-style-type: none;

          span {
            color: #999;
            font-size: 14px;
            position: absolute;
            top: 0px;
            right: 20px;
            cursor: pointer;
            &:hover {
              color: #5046e1;
            }
          }
          p {
            color: #222;
            display: block;
            width: 80%;
            height: 50px;
            overflow: hidden;
            position: relative;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
          }
        }
      }
    }
  }
  .main {
    width: 100%;
    height: auto;
    background: #f4f5f9;
    .mianB {
      width: 80%;
      margin: 0 auto;
      .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
        background: #ffff;
        position: relative;
        span {
          font-size: 17px;
          color: #6b6b6b;
        }
        .xian {
          width: 67px;
          height: 2px;
          border-radius: 5px;
          background: #121f40;
          position: absolute;
          bottom: 4px;
          left: 29px;
        }
      }
      .articleBox {
        width: 100%;
        height: 530px;
        margin-bottom: 50px;
        position: relative;
        .img {
          width: 100%;
          height: 100%;
        }
        .kuai {
          position: absolute;
          top: 2.4vw;
          width: 35px;
          height: 65px;
          background: red;
          z-index: 1;
          left: 40.6vw;
        }
        .detail {
          width: 37.5vw;
          // height: 22vw;
          border: 3px solid #e4993e;
          position: absolute;
          top: 4vw;
          right: 2vw;
          padding-top: 10px;
          padding-bottom: 30px;
          font-size: 15px;
          .detalB {
            width: 30vw;
            height: auto;
            margin: 0 auto;
            padding-left: 10px;
            h3 {
              color: #ffff;
              font-weight: 600;
              font-size: 1.2em;
              padding-bottom: 0.5vw;
            }
            .word {
              color: #c2c4c9;
              font-size: 1em;
              line-height: 1.6vw;
            }
            .wordB {
              margin-top: 1.4vw;
              color: #c2c4c9;
              span {
                font-weight: 400;
                font-size: 16px;
                padding-bottom: 18px;
              }
            }
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .footer {
    flex: none;
  }
}
</style>

<template>
  <div class="home">
    <v-header class="header"></v-header>
    <div class="bannerlun">
      <div class="bannerA">
        <el-carousel indicator-position="outside" height="412px" :interval="2000">
          <el-carousel-item v-for="item in pictureList" :key="item">
            <img :src="item.image" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="search">
        <input type="text" placeholder="请输入您的关键字" v-model="homeForm.name" />
        <button>
          <span @click="search" class="iconfont">查询</span>
        </button>
      </div>
    </div>

    <div class="thing">
      <div class="thingB">
        <div class="list">
          <div class="title">
            <span>招标公告</span>
            <span class="more" @click="see">查看更多》</span>
            <div class="line"></div>
          </div>
          <ul>
            <li v-for="item in TypeList" :key="item.index">
              <p>[{{ item.created }}]{{ item.bidTitle }}</p>
              <span @click="newsJump(item.baId)">查看</span>
            </li>
          </ul>
        </div>
        <div class="list left">
          <div class="title">
            <span>中标公示</span>
            <span class="more" @click="see">查看更多》</span>
            <div class="line"></div>
          </div>
          <ul>
            <li class="listEvent" v-for="item in rightList" :key="item.index">
              <p>[{{ item.created }}]{{ item.bidTitle }}</p>
              <span @click="newsJumpA(item.baId)">查看</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="mianB">
        <div class="title">
          <span>平台介绍</span>
          <div class="xian"></div>
        </div>
        <div class="articleBox">
          <div class="img">
            <img src="@/assets/images/home/js.png" alt="" />
          </div>
          <div class="kuai"></div>
          <div class="detail">
            <div class="detalB">
              <h3>关于泛糖</h3>
              <div class="word">
                智慧物流平台是融合糖物流产业链上下游全环节，扎根糖产品物流干线整车市场， 提供相关物流需求、代发运优质服务，实现车辆和司机调度、在途管理、
                收发货、结算等业务的综合服务平台。平台打通产业链上下游信息流
                ，对各环节时点数据进行有效采集，实时了解业务运作动态，利用信息化手段整合企业优势资源，
                对企业各环节的成本进行记录和分析，持续优化企业成本结构，提高效益。
              </div>
              <div class="wordB">
                <span>促糖业繁荣·创甜蜜未来</span>
                <p>Promoting the prosperity of sugar</p>
                <p>industry and creating a</p>
                <p>sweet future</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-footer class="footer"></v-footer>
  </div>
</template>

<script>
import VHeader from '@/views/layout/header'
import VFooter from '@/views/layout/footer'
import GetCompanyNews from '../../../assets/json/GetCompanyNews.json'
// import newsList from './newsList'
import { queryBiddingList, queryBiddingStatusListA, queryBiddingStatusListB, queryBiddingStatusListRight, queryBiddingStatusListLeft } from '@/request/api'
export default {
  name: 'home',
  components: {
    VHeader,
    VFooter
    // newsList
  },
  data() {
    return {
      homeForm: {
        name: ''
      },
      pictureList: [
        { image: require('@/assets/images/home/lunboA.png') },
        { image: require('@/assets/images/home/lunboA.png') },
        { image: require('@/assets/images/home/lunboA.png') },
        { image: require('@/assets/images/home/lunboA.png') }
      ],
      TypeList: [],
      rightList: []
    }
  },
  created() {},
  mounted() {
    this.queryBiddingListA()
    this.queryBiddingStatusListB()
  },
  methods: {
    search() {
      this.queryBiddingListA()
      this.queryBiddingStatusListB()
    },
    //跳转左边列表详情
    newsJump(id) {
      this.$router.push({ name: 'router.newsDetails', params: { id } })
    },
    //跳转右边列表详情
    newsJumpA(id) {
      this.$router.push({ name: 'router.detailsRight', params: { id } })
    },
    see() {
      this.$router.push('/searchResult')
    },
    queryBiddingListA() {
      queryBiddingStatusListLeft({
        bidTitle: this.homeForm.name
        // PageIndex:'1',
        // PageSize:'10'
      }).then(res => {
        this.TypeList = res.data
      })
      // queryBiddingList({
      //   bidCode:'',
      //   enrollStatus:'',
      //   bidAuditstatus:'Y',
      //   bidBiddingstatus:'Y',
      //   PageIndexs: 1,
      //   PageSizes: 99
      // }).then(res=>{
      //   this.TypeList = res.data
      //   console.log(this.TypeList,222)
      // })
    },
    queryBiddingStatusListB() {
      queryBiddingStatusListRight({ bidTitle: this.homeForm.name }).then(res => {
        this.rightList = res.data
      })
    }
  }
}
</script>
